<template>
  <div>
    <todo-header
        @add-todo="addTodo"
    ></todo-header>
    <todos
        :data="todoList"
        @toggle-completed="toggleCompleted"
        @remove-todo-item="removeTodoItem"
    ></todos>
    <todo-footer
        @remove-all="removeAll"
    ></todo-footer>
  </div>
</template>

<script>
import TodoHeader from './TodoHeader/index.vue';
import Todos from './Todos/index.vue';
import TodoFooter from './TodoFoot/index.vue'
import { computed } from '@vue/reactivity';

export default {
    name: 'TodoList',
    components: {
        TodoHeader,
        Todos,
        TodoFooter
    },
    provide() {
        return {
            placeholder: computed(() => this.placeholder),
            dataLen: computed(() => this.todoList.length)
        }
    },
    data() {
        return {
            placeholder: '请输入数据!',
            todoList: []
        }
    },
    methods: {
        addTodo(obj) {
            this.todoList.push(obj);
        },
        toggleCompleted(id) {
             this.todoList=this.todoList.map(item => {
                if (item.id === id) {
                    item.completed = !item.completed;
                }
                return item;
            });
        },
        removeTodoItem(id) {
            this.todoList = this.todoList.filter(item => item.id !== id);
        },
        removeAll() {
            this.todoList = [];
        }
    }
}
</script>

